<!--
浮动的特性
    1）脱标，不保留位置
        浮动元素会脱离标准流的控制，并移动（浮）到指定位置，俗称脱标
        浮动的盒子不再保留原先的位置空间，排在后面的标准流元素会占用该空间
    2）一行显示，顶部对齐，紧紧相贴
        浮动元素一行显示，且以元素顶部为水平线去对齐
        容器宽度一行挤不下时，会另起一行继续以新行元素的顶部对齐
        元素之间不会因为换行符而出现空白间隙，彼此是紧贴一起的
    3）具有行内块特征
        任何标签都可以添加浮动
        不管原来是哪种模式（块、行内、行内块）的元素，添加浮动后都具有【行内块元素】近似的特征
        由此：行内元素有浮动后，不需要转化，也能使宽高生效。

宽度问题
    块元素
        不指定width时，是以父容器宽度为准的。
    行内块元素、行内元素
        不指定width时，是以内容自身宽度为准的。
    浮动后
        不管是啥模式的元素，都是以【行内块元素】宽度为准，即以内容自身宽度为准。
            块元素（浮动）--》行内块元素：内容宽度
            行内元素（浮动）--》行内块元素：内容宽度
-->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box1 {
        float: left;
        width: 100px;
        height: 100px;
        background: skyblue;
    }
    /* 盒子2没有设置浮动，只是普通流的块元素 */
    .box2 {
        width: 300px;
        height: 200px;
        background: cyan;
    }
    span {
        float: left;
        height: 100px;
        background: red;
    }
</style>

<div class="box1">盒子1</div>
<div class="box2">盒子2：不设置浮动</div>
<!-- span浮动时碰到块元素的下边缘，会另起一行继续浮动排列，又因为浮动具有行内块特征，故此设置的宽高也会生效 -->
<span>行内元素3</span>
<span>行内元素44444444</span>
<span>行内元素5555</span>
<span>行内元素6</span>